<template>
  <div>
    <el-dialog title="角色分配" :visible="showDialog" width="70%" @close='closeFn'>
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">
          {{ item.title }}
        </el-checkbox>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeFn">取 消</el-button>
        <el-button type="primary" @click="confrimFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getRoleList, getRolesById, editEmployees } from "@/api/employees";
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      checkList: [],
      roleList: [],
    };
  },
  async created() {
    const res = await getRoleList();
    console.log(29, res);
    this.roleList = res.data;
  },
  methods: {
    //获取默认角色
    async getRolesById(id) {
      const res = await getRolesById(id);
      console.log(43, res);
      this.userId = id; //id存起来
      //保存并回显角色
      this.checkList = this.changeRole(res.data.roles) || [];
    },
    //roles的值不能直接回显进去。需要声明一个方法，调用res.data.roles里面的资料，遍历，把id存进去listId，然后返回
    changeRole(data) {
      /* let listId = [];
      data.forEach((item) => {
        return listId.push(item.id);
      }); */
      //return listId;
     return data.map((item)=>{
       return item.id
     })
    },
    //实现分配角色
    async confrimFn() {
      await editEmployees({
        id: this.userId,
        roles: this.checkList,
      });
      //关闭弹窗
      this.closeFn();
    },

    closeFn() {
      this.$emit("update:showDialog", false);
    },
  },
};
</script>

<style>
</style>